import React from 'react'
import { Icon, Button, Radio } from 'antd';
import { WeaSelect } from 'ecCom';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import './../../style/timeselect/TimeSelect';

export default class TimeSelect extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            optionsMonth:[
                {
                    key: "1",
                    showname: "1月"
                },{
                    key: "2",
                    showname: "2月"
                },{
                    key: "3",
                    showname: "3月"
                },{
                    key: "4",
                    showname: "4月"
                },{
                    key: "5",
                    showname: "5月"
                },{
                    key: "6",
                    showname: "6月"
                },{
                    key: "7",
                    showname: "7月"
                },{
                    key: "8",
                    showname: "8月"
                },{
                    key: "9",
                    showname: "9月"
                },{
                    key: "10",
                    showname: "10月"
                },{
                    key: "11",
                    showname: "11月"
                },{
                    key: "12",
                    showname: "12月"
                }
            ],
            optionsYear:this.props.optionsYear,
            yearClass:'show-div',
            monthClass:'hidden-div',
            monthValue:'',
            yearValue:'',
            defaultValue:this.props.defaultValue,
            yearId:this.props.yearId,
            monthId:this.props.monthId,
        }
    }

    componentWillReceiveProps(newProps){
            if(newProps.defaultValue=="1"){
                this.setState({yearClass:'hidden-div',monthClass:'hidden-div'});
            }else if(newProps.defaultValue=="2"){
                this.setState({yearClass:'show-div',monthClass:'hidden-div'});
            }else if(newProps.defaultValue=="3"){
                this.setState({yearClass:"show-div",monthClass:"show-div"});
            }
            this.setState({optionsYear:newProps.optionsYear,defaultValue:newProps.defaultValue,monthValue:newProps.monthValue,yearValue:newProps.yearValue,yearId:newProps.yearId,monthId:newProps.monthId});
      }

    onMainChange = (e) => {
        let val = e.target.value;
        let canReturn = false;
        if(val==1){
           this.setState({yearClass:'hidden-div',monthClass:'hidden-div'});
           canReturn = true;
        }else if(val==2){
            this.setState({yearClass:'show-div',monthClass:'hidden-div'});
            canReturn = true;
        }else if(val==3){
            this.setState({yearClass:'show-div',monthClass:'show-div'});
            canReturn = true;
        }
        if (canReturn && typeof this.props.typeChange === 'function') {
            this.props.typeChange(val);
        }else{
            console.log('typeChange:',val);
        }
    }

    yearChange = (v, showname) => {
        this.setState({yearValue:v});
        if (typeof this.props.yearChange === 'function') {
          this.props.yearChange(v);
        }else{
          console.log('yearChange:',v);
        }
      }

    monthChange = (v, showname) => {
        this.setState({monthValue:v});
        if (typeof this.props.monthChange === 'function') {
            this.props.monthChange(v);
        }else{
            console.log('monthChange:',v);
        }
    }

    yearLayout(){

    }
    
    render() {
        const { optionsYear, optionsMonth,yearClass,monthClass,monthValue,yearValue,defaultValue,yearId,monthId } = this.state;
        return (
            <div className="timeGroup">
                <RadioGroup defaultValue={defaultValue} onChange={(e) => this.onMainChange(e)}>
                    <RadioButton value="1">年</RadioButton>
                    <RadioButton value="2">月</RadioButton>
                    <RadioButton value="3">日</RadioButton>
                </RadioGroup>
                <div className={yearClass}  id={yearId} style={{marginLeft:'5px',position:'relative'}}>
                    <WeaSelect
                        style={{minWidth:'50px',marginBottom:'4px'}}
                        options={optionsYear}
                        value={yearValue}
                        onChange = {this.yearChange}
                        layout = {document.getElementById(yearId)}
                    />
                </div>
                <div className={monthClass} id={monthId} style={{marginLeft:'5px',position:'relative'}}>
                    <WeaSelect
                        style={{minWidth:'50px',marginBottom:'4px'}}
                        options={optionsMonth}
                        value={monthValue}
                        onChange = {this.monthChange}
                        layout = {document.getElementById(monthId)}
                    />
                </div>
            </div>
        )
    }
}